<template>
  <div class="page">
    <div id="green-filter"></div>
    <div id="top-gradient" class="gradient"></div>
    <div id="bottom-gradient" class="gradient"></div>
    <div id="logo-wrapper">
      <div id="logo">
        <div id="logo-border" class="absolute-centered"></div>
        <div id="logo-border-inner" class="absolute-centered"></div>
        <div id="logo-text">
          <!-- <video
            class="video"
            muted
            loop
            playsinline
            src="../assets/video/blaze.mp4"
          ></video> -->
          <div id="hulu-text" class="zen-dots-font">2025</div>
          <div id="originals-text" class="jakarta-sans-font">
            Happy New Year
          </div>
        </div>
      </div>
    </div>
    <button id="restart-button" class="rubik-font" type="button">
      Restart
    </button>
    <button id="stop-button" class="rubik-font" type="button">stop</button>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, watch } from "vue";
const emit = defineEmits(["onComplete"]);
const init = () => {
  const hulu = new SplitText("#hulu-text"),
    originals = new SplitText("#originals-text");

  // 设置默认的 CSS 样式
  // hulu.chars.forEach((char) => {
  //   char.style.fontFamily = "Arial, sans-serif"; // 设置字体家族
  //   char.style.inset = 0;
  //   char.style.mixBlendMode = "screen";
  // });

  const tl = new gsap.timeline({
    onComplete: () => {
      emit("onComplete", tl);
    },
  });

  tl.from(["#top-gradient", "#bottom-gradient"], 0.7, {
    ease: "power3.inOut",
    filter: "blur(0px)",
    opacity: 0,
  })
    .from("#green-filter", 0.8, { opacity: 0, scale: 3 }, "-=50%")
    .to("#green-filter", 0.25, { opacity: 0, scale: 3 })
    .to(
      ["#top-gradient", "#bottom-gradient"],
      0.3,
      { filter: "blur(0px)", opacity: 0 },
      "-=100%"
    )
    .set("#logo", { opacity: 1 })
    .from(hulu.chars, 0.2, {
      ease: "back",
      filter: "blur(0.3em)",
      opacity: 0,
      scale: 1.5,
      stagger: 0.02,
    })
    .from(originals.chars, 0.2, {
      delay: 0.25,
      filter: "blur(0.3em)",
      opacity: 0,
      scale: 0.5,
      stagger: 0.02,
      xPercent: -25,
    })
    .from(
      "#logo-border",
      0.4,
      { ease: "power3.out", opacity: 0, scale: 0.75 },
      "-=100%"
    )
    .from(
      "#logo-border-inner",
      0.4,
      { ease: "power3.out", scale: 0.75 },
      "-=100%"
    )
    .to("#logo", 1.5, { scale: 1.1 }, "-=20%")
    .to(
      ["#logo-border", "#logo-border-inner"],
      1.5,
      { ease: "power3.out", scale: 1.1 },
      "-=100%"
    )
    .to("#logo-border", 1.25, { ease: "power4.in", scale: 8 }, "-=50%")
    .to("#logo-border-inner", 0.5, { ease: "power4.in", scale: 8 }, "-=60%")
    .to("#logo", 0.25, { opacity: 0, scale: 1.2 }, "-=50%");

  document.getElementById("restart-button").onclick = () => tl.restart();
  let isStop = false;
  document.getElementById("stop-button").onclick = () => {isStop = !isStop; tl.paused(isStop);}
};
onMounted(() => {
  init();
});
</script>

<style>
:root {
  --background-color: rgb(10, 10, 10);
  /* --hulu-color: rgb(27, 219, 124); */
  --hulu-color: rgb(162, 241, 241);

  --gradient-green-rgb: 153, 252, 252;
  --gradient-blue-rgb: 127, 117, 237;
  --gbr: rgb(127, 117, 237);
  --gradient-violet-rgb: 171, 111, 218;
  --gvr: rgb(171, 111, 218);

  --highlight-blue-rgb: 45, 37, 143;
  --hbr: rgb(45, 37, 143);
}
</style>
<style lang="scss" scoped>
$video-z-index: 10;
$text-z-index: 11;
.page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  background-color: var(--background-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  width: 100vw;
  z-index: 1;
}

.absolute-centered {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.jakarta-sans-font {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: rgb(122, 239, 239);
}

.zen-dots-font {
  font-family: "Zen Dots", cursive;
  //   background-color: #ffffff00;
  //   z-index: $text-z-index;
}

.rubik-font {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
}

#restart-button {
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  bottom: 10px;
  color: white;
  cursor: pointer;
  font-size: 0.9em;
  left: 50%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 100;
}
#stop-button {
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  bottom: 10px;
  color: white;
  cursor: pointer;
  font-size: 0.9em;
  left: 55%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 100;
}

#restart-button:hover,
#restart-button:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

#green-filter {
  background: radial-gradient(
    rgba(var(--gradient-green-rgb), 0.05),
    rgba(var(--gradient-green-rgb), 0.4) 80%
  );
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
}

.gradient {
  filter: blur(3em);
  height: 80px;
  left: -5%;
  position: absolute;
  width: 110%;
}

#top-gradient {
  background: linear-gradient(
    to right,
    rgba(var(--gradient-blue-rgb), 0.75) 0% 10%,
    transparent 10% 20%,
    rgba(var(--gradient-violet-rgb), 0.5) 20% 50%,
    rgba(var(--gradient-blue-rgb), 0.5) 50% 70%,
    rgba(var(--gradient-green-rgb), 0.75) 70%
  );
  top: -50px;
}

#bottom-gradient {
  background: linear-gradient(
    to right,
    rgba(var(--gradient-blue-rgb), 0.75) 0% 10%,
    transparent 10% 30%,
    rgba(var(--gradient-blue-rgb), 0.5) 30% 50%,
    transparent 50% 70%,
    rgba(var(--gradient-violet-rgb), 0.5) 70% 80%,
    transparent 80%
  );
  bottom: -50px;
}

#logo-wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

#logo {
  opacity: 0;
  position: relative;
  z-index: 2;
}

#logo-border {
  background-color: var(--hulu-color);
  border-radius: 2.25em;
  height: 160%;
  width: 140%;
  z-index: 1;
}

#logo-border-inner {
  background-color: var(--background-color);
  border-radius: 2em;
  height: calc(160% - 0.5em);
  width: calc(140% - 0.5em);
  z-index: 2;
}

#logo-text {
  position: relative;
  z-index: 3;
  overflow: hidden;
  user-select: none;
  text-shadow: 0 0.05em 0 #ffb0c0, 0 0.1em 0.1em rgba(70, 0, 35, 0.3),
    0 0.4em 0.3em rgba(70, 0, 35, 0.1);
}

.video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  //   z-index: $video-z-index;
  //   display: none;
}

#hulu-text {
  color: var(--hulu-color);
  font-size: 8em;
  font-weight: 800;
  height: 120px;
  line-height: 120px;
}

#originals-text {
  //   color: white;
  font-size: 3em;
  letter-spacing: 0.12em;
}

@keyframes bounce {
  from,
  3.33%,
  8.83%,
  16.66% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  6.66%,
  7.16% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.1);
  }

  11.66% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -7px, 0) scaleY(1.05);
  }

  13.33% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  15% {
    transform: translate3d(0, -2px, 0) scaleY(1.02);
  }
}

@media (max-width: 800px) {
  #logo-wrapper {
    transform: scale(0.7);
  }
}

@media (max-width: 600px) {
  #restart-button {
    left: auto;
    right: 10px;
    transform: none;
  }
}

// end
</style>
